<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="./common-styles.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0078D7', // Windows蓝
                        secondary: '#2C73D2',
                        neutral: {
                            100: '#F5F5F5',
                            200: '#E5E5E5',
                            300: '#D4D4D4',
                            400: '#A3A3A3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        },
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
                        'hover': '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
                    }
                },
            }
        }
    </script>
</head>

<body class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <!-- 统一导航菜单 -->
<nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-medium text-lg">智能运维平台</span>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                    <a href="多模态.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 多模态评估
                    </a>
                    <a href="聊天助手.html" class="border-primary text-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-comment mr-1"></i> 聊天助手
                    </a>
                    <a href="使用率.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-microchip mr-1"></i> 性能监控
                    </a>
                    <a href="ai.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-bug mr-1"></i> 故障诊断
                    </a>
                    <a href="os运维场景.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-server mr-1"></i> 运维场景
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <a href="登录.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                    <i class="fa fa-sign-in mr-1"></i> 登录
                </a>
                <a href="注册.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                    <i class="fa fa-user-plus mr-1"></i> 注册
                </a>
                <div class="relative">
                    <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                        <img class="h-8 w-8 rounded-full object-cover" src="https://i.pravatar.cc/150?img=33" alt="用户头像">
                    </button>
                </div>
                <button type="button" class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="登录.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-sign-in mr-1"></i> 登录
            </a>
            <a href="注册.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-user-plus mr-1"></i> 注册
            </a>
            <a href="多模态.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-line-chart mr-1"></i> 多模态评估
            </a>
            <a href="聊天助手.html" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                <i class="fa fa-comment mr-1"></i> 聊天助手
            </a>
            <a href="使用率.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-microchip mr-1"></i> 性能监控
            </a>
            <a href="ai.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-bug mr-1"></i> 故障诊断
            </a>
            <a href="os运维场景.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-server mr-1"></i> 运维场景
            </a>
        </div>
    </div>
</nav>

    <!-- 主内容区域 -->
    <main class="flex-grow flex flex-col">
        <!-- 右侧聊天区域 -->
        <div class="flex-grow flex flex-col">
            <!-- 聊天头部 -->
            <div class="p-4 border-b border-neutral-200 bg-white flex items-center justify-between">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-neutral-800">代码助手</h3>
                        <p class="text-xs text-success flex items-center">
                            <span class="h-2 w-2 rounded-full bg-success mr-1"></span>
                            在线
                        </p>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-paperclip"></i>
                    </button>
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-star-o"></i>
                    </button>
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                </div>
            </div>

            <!-- 聊天内容 -->
            <div class="flex-grow p-6 overflow-y-auto bg-neutral-50 scrollbar-hide">
                <!-- 欢迎消息 -->
                <div class="flex items-start mb-6">
                    <div
                        class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white flex-shrink-0">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="ml-3 max-w-[80%]">
                        <div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm">
                            <p class="text-sm text-neutral-800">你好！我是代码助手，有什么编程问题我可以帮助你解决吗？</p>
                        </div>
                        <div class="flex items-center mt-1">
                            <span class="text-xs text-neutral-400">12:28</span>
                            <span class="ml-2 text-xs text-neutral-400">已读</span>
                        </div>
                    </div>
                </div>

                <!-- 用户消息 -->
                <div class="flex items-start justify-end mb-6">
                    <div class="mr-3 max-w-[80%]">
                        <div class="bg-primary text-white p-4 rounded-lg rounded-tr-none shadow-sm">
                            <p class="text-sm">你能帮我写一个Python函数来计算斐波那契数列吗？</p>
                        </div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="text-xs text-neutral-400">12:29</span>
                        </div>
                    </div>
                    <div
                        class="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-600 flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                </div>

                <!-- AI消息 -->
                <div class="flex items-start mb-6">
                    <div
                        class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white flex-shrink-0">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="ml-3 max-w-[80%]">
                        <div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm">
                            <p class="text-sm text-neutral-800">当然可以！这是一个计算斐波那契数列的Python函数：</p>
                            <div class="mt-3 bg-neutral-50 p-3 rounded border border-neutral-200">
                                <pre class="text-xs font-mono text-neutral-700">def fibonacci(n):
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    else:
        sequence = [0, 1]
        for i in range(2, n):
            next_num = sequence[-1] + sequence[-2]
            sequence.append(next_num)
        return sequence</pre>
                            </div>
                            <p class="text-sm text-neutral-800 mt-3">
                                这个函数接受一个整数n作为参数，返回一个包含前n个斐波那契数的列表。例如，fibonacci(5)会返回[0, 1, 1, 2, 3]。</p>
                        </div>
                        <div class="flex items-center mt-1">
                            <span class="text-xs text-neutral-400">12:30</span>
                            <span class="ml-2 text-xs text-neutral-400">已读</span>
                        </div>
                    </div>
                </div>

                <!-- 用户消息 -->
                <div class="flex items-start justify-end mb-6">
                    <div class="mr-3 max-w-[80%]">
                        <div class="bg-primary text-white p-4 rounded-lg rounded-tr-none shadow-sm">
                            <p class="text-sm">太好了，谢谢！那如何用递归的方式实现呢？</p>
                        </div>
                        <div class="flex items-center justify-end mt-1">
                            <span class="text-xs text-neutral-400">12:31</span>
                        </div>
                    </div>
                    <div
                        class="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center text-neutral-600 flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                </div>

                <!-- AI消息 -->
                <div class="flex items-start mb-6">
                    <div
                        class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white flex-shrink-0">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="ml-3 max-w-[80%]">
                        <div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm">
                            <p class="text-sm text-neutral-800">这是递归方式实现的斐波那契数列函数：</p>
                            <div class="mt-3 bg-neutral-50 p-3 rounded border border-neutral-200">
                                <pre class="text-xs font-mono text-neutral-700">def fibonacci_recursive(n):
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    else:
        sequence = fibonacci_recursive(n-1)
        next_num = sequence[-1] + sequence[-2]
        sequence.append(next_num)
        return sequence</pre>
                            </div>
                            <p class="text-sm text-neutral-800 mt-3">
                                请注意，递归方法虽然简洁，但对于大数n会有性能问题，因为它会有大量的重复计算。对于生产环境，建议使用迭代方法。</p>
                        </div>
                        <div class="flex items-center mt-1">
                            <span class="text-xs text-neutral-400">12:32</span>
                            <span class="ml-2 animate-pulse-slow text-xs text-primary">正在输入...</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-4 border-t border-neutral-200 bg-white">
                <div class="flex">
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none mr-2">
                        <i class="fa fa-smile-o"></i>
                    </button>
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none mr-2">
                        <i class="fa fa-paperclip"></i>
                    </button>
                    <button
                        class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none mr-2">
                        <i class="fa fa-microphone"></i>
                    </button>
                    <textarea placeholder="输入消息..."
                        class="flex-grow p-3 rounded-lg border border-neutral-200 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary resize-none"
                        rows="1"></textarea>
                    <button
                        class="ml-2 p-3 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center justify-center">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
                <div class="flex justify-between mt-2 text-xs text-neutral-500">
                    <div>
                        <button class="hover:text-primary">添加附件</button>
                        <span class="mx-2">|</span>
                        <button class="hover:text-primary">插入代码</button>
                        <span class="mx-2">|</span>
                        <button class="hover:text-primary">插入图片</button>
                    </div>
                    <div>
                        <span>Shift + Enter 换行</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>